This repository was archived by the owner on Jul 9, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 374
a11y: fix table-forms keyboard navigation #9020
Merged
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The PR aims to address the following issues found on pages with lists containing nested forms, including: "Bot Responses", "Knowledge (QnA)" and "Knowledge Base" pages.
Here is the list of issues addressed:
- Unable to navigate to fields nested in DetailsList cells using keyboard
- Some buttons are hidden while navigating via keyboard ("Clear field" button, "Add new" item button)
- Save via keyboard Enter key doesn't work under several circumstances
- Shift+Enter should persist caret position and the field in focus while adding a new line
- Visual focus indication for focused fields works unstable
- No error announcement
- No way to blur selected fields when the focus is on the DetailsList cell field
Highlights on changes made:
- Implement a CellFocusZone component to handle focus in DetailsLists' cells having form elements
- Move all related logic to the component, so it can: focus form elements, handle Escape and Enter key and handle focus loss cases
- Update EditField to play well with the new component
- Add a callback to be called on EditField when a new line gets added
- Handle Shift+Enter properly: from now it adds a new row to input and resets focus back to the input after it got switched to the textarea element
- Update CSS rules to handle focus for tables-view and EditableField components
- Refactor styles: move shared styles to the CellFocusZone
- Refactor table-views: introduce CellFocusZone and improve keyboard handling
- Knowledge Base: change the way alternative questions added
- Fix EditField styles to handle field height correctly
- Add announcements for EdtiField errors
Contributor
|
Looks like the server package's typecheck is failing: You can verify your fix by running |
Collaborator
Author
|
@tonyanziano strange. It passes locally: But |
tonyanziano
suggested changes
Mar 2, 2022
tonyanziano
approved these changes
Mar 3, 2022
Merged
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.

Description
The PR aims to address the following issues found on pages with lists containing nested forms, including: "Bot Responses", "Knowledge (QnA)" and "Knowledge Base" pages.
Here is the list of issues addressed:
Highlights on changes made:
Task Item
Screenshots
#minor